<template>
  <div class="login">
    <Top />
    <div class="top"></div>
    <div class="mask">
      <el-form hide-required-asterisk ref="ruleFormRef" label-position="top" :model="userForm" :rules="rules"
        class="login-form" :size="formSize">
        <h1 class="title">登录</h1>
        <el-form-item prop="username" label="手机号">
          <el-input v-model="userForm.username" :prefix-icon="Avatar" size="large" auto-complete="off"
            placeholder="用户名/邮箱/手机号" :style="{ fontSize: '16px' }" />
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input v-model="userForm.password" type="password" :prefix-icon="Lock" size="large" auto-complete="off"
            placeholder="密码" :style="{ fontSize: '16px' }" />
        </el-form-item>
        <div class="forgetPassword">
          <span>找回密码</span>
        </div>
        <div class="submit">
          <el-button size="large" class="btn_login" @click="submitForm">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormRules } from 'element-plus'
import { loginApi } from '@/api/login'
import { ElMessage } from 'element-plus'
import { Avatar, Lock } from '@element-plus/icons-vue'
import router from '@/router'
import Top from '@/components/top.vue'

const formSize = ref('default')
const ruleFormRef = ref()
const userForm = reactive({
  username: 'dastw',
  password: '123456'
})
// 数据效验
const rules = reactive<FormRules>({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 12, message: '用户名的长度范围是 3 至 12 个字符', trigger: 'blur' }
  ],
  useremail: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { min: 6, max: 20, message: '电子邮件地址的长度范围是 6 至 20 个字符', trigger: 'blur' }
  ],
  userphone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { max: 11, message: '手机号通常是 11 位数字', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 10, message: '密码至少是6位至15位', trigger: 'blur' }
  ]
})
// 提交
const submitForm = async () => {
  await ruleFormRef.value.validate()
  const res = await loginApi(userForm)
  console.log(res)
}

var user = reactive({})
</script>

<style scoped lang="scss">
.login {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  position: relative;
  background: url('../../assets/image/login_bg.jpg') 50%;
  background-size: contain;

  .top {
    position: absolute;
    top: 40px;
    height: 30px;
    width: 100%;
    background: #7b1e17;
  }

  .mask {
    width: 100%;
    height: calc(100vh - 40px);
    background: rgba($color: #fdfdfd, $alpha: 0.5);
  }
}

.title {
  margin: 0px auto 50px;
  text-align: center;
  color: #000000;
}

.login-form {
  position: absolute;
  border-radius: 6px;
  background: rgba(146, 78, 71, 0.6);
  width: 300px;
  height: 450px;
  padding: 25px 25px 5px 25px;
  top: 20%;
  left: 37%;

  :deep(.el-form-item__label) {
    color: white;
  }

  :deep(.el-input__wrapper) {
    border-radius: 50px;
  }

  .forgetPassword {
    float: right;
    color: rgba($color: #fdfbfb, $alpha: 0.7);
  }

  .submit {
    margin-top: 80px;
    text-align: center;

    .btn_login {
      background-color: #7b1e17;
      border-color: #7b1e17;
      color: white;
      width: 60%;
      height: 70px;
      font-size: 20px;
      border-radius: 50px;
    }
  }
}</style>